<!-- Page header -->
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col-8">
        <!-- 页面标题 -->
        <h2 class="page-title">
          职位管理
        </h2>
        <div class="text-muted mt-1 bit-paginator-text"></div>
      </div>
      <!-- 搜索框 -->
      <div class="col-4">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="请输入关键字..." id="job-list-search-job-keyword">
          <!-- 宽屏 -->
          <button class="btn btn-outline-primary d-none d-sm-inline-block job-list-search-job" type="button">
            <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
            <span>搜索</span>
          </button>
          <!-- 窄屏 -->
          <button class="btn btn-outline-primary d-sm-none btn-icon job-list-search-job" type="button">
            <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-search"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Page body -->
<div class="page-body">
  <div class="container-xl">
    <div class="row g-3">
      <ul class="timeline" id="job-list-items-body">
        <!-- <li class="timeline-event">
          <div class="timeline-event-icon bg-twitter-lt">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4"></path>
                <path d="M10 11l4 0"></path>
                <path d="M12 9l0 4"></path>
             </svg>
          </div>
          <div class="card timeline-event-card">
            <div class="card-body">

              <div class="row g-0 align-items-center">
                <div class="col-auto">
                  <div class="card-body">
                    <div class="avatar avatar-md" style="background-image: url(./static/jobs/job-9.png)"></div>
                  </div>
                </div>
                <div class="col">
                  <div class="card-body ps-0">
                    <div class="row">
                      <div class="col">
                        <h3 class="mb-0"><a href="javascript:void(0);">Frontend Web Engineer</a></h3>
                      </div>
                      <div class="col-auto fs-3 text-blue"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-report-money"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 11h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3h-2.5" /><path d="M12 17v1m0 -8v1" /></svg>
                        <strong>140,000</strong> - <strong>180,000</strong>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md">
                        <div class="mt-3 list-inline list-inline-dots mb-0 text-muted">
                          <div class="list-inline-item">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                              <path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
                              <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
                           </svg>
                           小比特
                          </div>
                          <div class="list-inline-item">
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                              <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>
                              <path d="M12 7v5l2 2"></path>
                              <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z"></path>
                           </svg>
                            2023-02-22 15:36:23
                          </div>
                          <div class="list-inline-item">
                            <span class="badge bg-green-lt">正常</span>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-auto">
                        <div class="mt-3 badges">
                            <ul class="list-inline list-inline-dots mb-0">
                              <li class="list-inline-item">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                  <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
                                  <path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"></path>
                               </svg>
                                 1006
                              </li>
                              <li class="list-inline-item">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                  <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
                                </svg>
                                 2008
                              </li>
                              <li class="list-inline-item">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                  <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                  <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>
                                  <path d="M12 12l0 .01"></path>
                                  <path d="M8 12l0 .01"></path>
                                  <path d="M16 12l0 .01"></path>
                               </svg>
                                 3006
                              </li>
                            </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-auto" style="margin-right: 1em;">
                  <div class="dropdown">
                    <a href="javascript:void(0);" class="btn-action" data-bs-toggle="dropdown" aria-expanded="false">
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>
                    </a>
                    <div class="dropdown-menu dropdown-menu-end">
                      <a href="javascript:void(0);" class="dropdown-item job-list-publish-btn" data-bs-toggle="modal" data-bs-target="#modal-opt-job">
                        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-link-plus"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 15l6 -6" /><path d="M11 6l.463 -.536a5 5 0 0 1 7.072 0a4.993 4.993 0 0 1 -.001 7.072" /><path d="M12.603 18.534a5.07 5.07 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>
                         &nbsp;&nbsp;发 布
                      </a>
                      <a href="javascript:void(0);" class="dropdown-item job-list-outline-btn" data-bs-toggle="modal" data-bs-target="#modal-opt-job">
                        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-link-off"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 15l3 -3m2 -2l1 -1" /><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /><path d="M3 3l18 18" /><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" /></svg>
                         &nbsp;&nbsp;下 线
                      </a>
                      <a href="javascript:void(0);" class="dropdown-item job-list-edit-btn">
                        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-edit"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg>
                        &nbsp;&nbsp;编 辑
                      </a>
                      <a href="javascript:void(0);" class="dropdown-item text-red job-list-delete-btn" data-bs-toggle="modal" data-bs-target="#modal_delete_job">
                        <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-trash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>
                         &nbsp;&nbsp;删 除
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li> -->
      </ul>
      <!-- 以上是内容 -->
    </div>

    <!-- 分页 -->
    <div class="row mt-4">
      <div class="d-flex align-items-center">
        <p class="m-0 text-muted bit-paginator-text"></p>
        <ul class="bit-paginator pagination m-0 ms-auto"></ul>
      </div>
    </div>
  </div>
</div>

<!-- 删除模态框 -->
<div class="modal modal-blur fade" id="modal_delete_job" tabindex="-1" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-status bg-danger"></div>
      <div class="modal-body text-center py-4">
        <!-- Download SVG icon from http://tabler-icons.io/i/alert-triangle -->
        <svg xmlns="http://www.w3.org/2000/svg" class="icon mb-2 text-danger icon-lg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 9v2m0 4v.01"></path><path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path></svg>
        <h3>确定要删除当前职位吗?</h3>
        <div class="text-muted">点击确定职位将被删除.</div>
      </div>
      <div class="modal-footer">
        <div class="w-100">
          <div class="row">
            <div class="col"><a href="javascript:void(0);" class="btn w-100" data-bs-dismiss="modal">
                取消
              </a></div>
            <div class="col"><a href="javascript:void(0);" class="btn btn-danger w-100" data-bs-dismiss="modal" id="job-list-delete-confirm-btn">
                确定
              </a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 修改状态模态框 -->
<div class="modal modal-blur fade" id="modal-opt-job" tabindex="-1" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
    <div class="modal-content">
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      <div class="modal-status bg-yellow"></div>
      <div class="modal-body text-center py-4">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-patch-question icon mb-2 text-yellow icon-lg" viewBox="0 0 16 16">
          <path d="M8.05 9.6c.336 0 .504-.24.554-.627.04-.534.198-.815.847-1.26.673-.475 1.049-1.09 1.049-1.986 0-1.325-.92-2.227-2.262-2.227-1.02 0-1.792.492-2.1 1.29A1.71 1.71 0 0 0 6 5.48c0 .393.203.64.545.64.272 0 .455-.147.564-.51.158-.592.525-.915 1.074-.915.61 0 1.03.446 1.03 1.084 0 .563-.208.885-.822 1.325-.619.433-.926.914-.926 1.64v.111c0 .428.208.745.585.745z"></path>
          <path d="m10.273 2.513-.921-.944.715-.698.622.637.89-.011a2.89 2.89 0 0 1 2.924 2.924l-.01.89.636.622a2.89 2.89 0 0 1 0 4.134l-.637.622.011.89a2.89 2.89 0 0 1-2.924 2.924l-.89-.01-.622.636a2.89 2.89 0 0 1-4.134 0l-.622-.637-.89.011a2.89 2.89 0 0 1-2.924-2.924l.01-.89-.636-.622a2.89 2.89 0 0 1 0-4.134l.637-.622-.011-.89a2.89 2.89 0 0 1 2.924-2.924l.89.01.622-.636a2.89 2.89 0 0 1 4.134 0l-.715.698a1.89 1.89 0 0 0-2.704 0l-.92.944-1.32-.016a1.89 1.89 0 0 0-1.911 1.912l.016 1.318-.944.921a1.89 1.89 0 0 0 0 2.704l.944.92-.016 1.32a1.89 1.89 0 0 0 1.912 1.911l1.318-.016.921.944a1.89 1.89 0 0 0 2.704 0l.92-.944 1.32.016a1.89 1.89 0 0 0 1.911-1.912l-.016-1.318.944-.921a1.89 1.89 0 0 0 0-2.704l-.944-.92.016-1.32a1.89 1.89 0 0 0-1.912-1.911l-1.318.016z"></path>
          <path d="M7.001 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0z"></path>
        </svg>
        <h3>确定要修改职位状态吗？</h3>
        <div class="text-muted">点击确定职位状态将被修改.</div>
      </div>
      <div class="modal-footer">
        <div class="w-100">
          <div class="row">
            <div class="col"><a href="javascript:void(0);" class="btn w-100" data-bs-dismiss="modal">
              取消
              </a></div>
            <div class="col"><a href="javascript:void(0);" class="btn btn-yellow w-100" data-bs-dismiss="modal" id="job-list-state-confirm-btn">
              确定
              </a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    // 记录当前页号
    let cuuurentPageNum = 1;
    // 修改的记录Id
    let recordId;
    // 修改的目标状态
    let recordState;
    // 修改操作的行
    let optRecordRow;
    // 加载职位列表
    function loadJobList(pageNum) {
      // 请求参数对象
      let sendData = {
        pageNum : pageNum,
        pageSize : pageSize,
        sort : 'id',
        order : 'desc',
        title : $('#job-list-search-job-keyword').val()
      };
      // AJAX请求
      $.ajax ({
        type : 'get',
        url : 'job/selectByUser',
        data : sendData,
        contentType : 'application/x-www-form-urlencoded',
        success : function (respData) {
          // 失败
          if (respData.code != 0) {
            // 提示
            $.toast({
              heading: '提示',
              text: respData.message,
              icon: 'info'
            });
            return;
          }
          // 成功构建页面
          buildJobList(respData.data);
        }
      });
    }
    // 首次加载
    loadJobList(cuuurentPageNum);

    // 构建Job列表
    function buildJobList(data) {
      // 清空页面内容
      $('#job-list-items-body').html('');
      // 结果集为空
      // 结果为空
      if (data.rows.length == 0) {
        // 显示内容
        $('#job-list-items-body').html('<h3>没有职位记录</h3>');
        // 清空分页信息
        $('.bit-paginator-text').html('');
        $('.bit-paginator').html('');
        return;
      }
      // 遍历结果集
      data.rows.forEach(job => {
        // 发布者头像
        if (!job.publisher.avatarUrl) {
          job.publisher.avatarUrl = avatarUrl;
        }
        // 价格标签
        let priceHtml;
        if (!job.rewardLower || !job.rewardUpper) {
          priceHtml = '<strong>薪资面议</strong>';
        } else {
          priceHtml = ' <strong>' + job.rewardLower + '</strong> - <strong>' + job.rewardUpper + '</strong> '
        }
        // 状态标签
        let stateHtml;
        switch (job.state) {
          case 0:
            stateHtml = '<span class="badge bg-yellow">草稿箱</span>'
            break;
          case 1: 
            stateHtml = '<span class="badge bg-green-lt">发布中</span>'
            break;
          case 2:
            stateHtml = '<span class="badge bg-pink">已下线</span>'
            break;
          case 3:
            stateHtml = '<span class="badge bg-muted">已过期</span>'
            break;
          default:
            stateHtml = '<span class="badge bg-dark">请检查</span>'
            break;
        }
        // 构建HTML
        let rowHtmlStr = '<li class="timeline-event">'
            + ' <div class="timeline-event-icon bg-twitter-lt">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-plus" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">'
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
            + ' <path d="M4 21v-13a3 3 0 0 1 3 -3h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-9l-4 4"></path>'
            + ' <path d="M10 11l4 0"></path>'
            + ' <path d="M12 9l0 4"></path>'
            + ' </svg>'
            + ' </div>'
            + ' <div class="card timeline-event-card">'
            + ' <div class="card-body">'
            + ' <div class="row g-0 align-items-center">'
            + ' <div class="col-auto">'
            + ' <div class="card-body">'
            + ' <div class="avatar avatar-md" style="background-image: url(' + job.publisher.avatarUrl + ')"></div>'
            + ' </div>'
            + ' </div>'
            + ' <div class="col">'
            + ' <div class="card-body ps-0">'
            + ' <div class="row">'
            + ' <div class="col">'
            + ' <h3 class="mb-0"><a href="javascript:void(0);" class="job-list-title-btn">' + job.title + '</a></h3>'
            + ' </div>'
            + ' <div class="col-auto fs-3 text-blue"><svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-report-money"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2" /><path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 11h-2.5a1.5 1.5 0 0 0 0 3h1a1.5 1.5 0 0 1 0 3h-2.5" /><path d="M12 17v1m0 -8v1" /></svg>'
            + ' ' + priceHtml
            + ' </div>'
            + ' </div>'
            + ' <div class="row">'
            + ' <div class="col-md">'
            + ' <div class="mt-3 list-inline list-inline-dots mb-0 text-muted">'
            + ' <div class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">'
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
            + ' <path d="M12 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>'
            + ' <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>'
            + ' </svg>'
            + ' ' + job.publisher.name
            + ' </div>'
            + ' <div class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-clock-edit" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">'
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
            + ' <path d="M21 12a9 9 0 1 0 -9.972 8.948c.32 .034 .644 .052 .972 .052"></path>'
            + ' <path d="M12 7v5l2 2"></path>'
            + ' <path d="M18.42 15.61a2.1 2.1 0 0 1 2.97 2.97l-3.39 3.42h-3v-3l3.42 -3.39z"></path>'
            + ' </svg>'
            + ' ' + job.createTime
            + ' </div>'
            + ' <div class="list-inline-item job-list-state">'
            + stateHtml
            + ' </div>'
            + ' </div>'
            + ' </div>'
            + ' <div class="col-md-auto">'
            + ' <div class="mt-3 badges">'
            + ' <ul class="list-inline list-inline-dots mb-0">'
            + ' <li class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-eye" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">'
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
            + ' <path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>'
            + ' <path d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"></path>'
            + ' </svg>'
            + ' ' + job.visitCount
            + ' </li>'
            + ' <li class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-heart" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">'
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
            + ' <path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>'
            + ' </svg>'
            + ' ' + job.favoriteCount
            + ' </li>'
            + ' <li class="list-inline-item">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-message-circle" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">'
            + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>'
            + ' <path d="M3 20l1.3 -3.9a9 8 0 1 1 3.4 2.9l-4.7 1"></path>'
            + ' <path d="M12 12l0 .01"></path>'
            + ' <path d="M8 12l0 .01"></path>'
            + ' <path d="M16 12l0 .01"></path>'
            + ' </svg>'
            + ' ' + job.receiveCount
            + ' </li>'
            + ' </ul>'
            + ' </div>'
            + ' </div>'
            + ' </div>'
            + ' </div>'
            + ' </div>'
            + ' <div class="col-auto" style="margin-right: 1em;">'
            + ' <div class="dropdown">'
            + ' <a href="javascript:void(0);" class="btn-action" data-bs-toggle="dropdown" aria-expanded="false">'
            + ' <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 19m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 5m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path></svg>'
            + ' </a>'
            + ' <div class="dropdown-menu dropdown-menu-end">'
            + ' <a href="javascript:void(0);" class="dropdown-item job-list-publish-btn" data-bs-toggle="modal" data-bs-target="#modal-opt-job">'
            + ' <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-link-plus"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 15l6 -6" /><path d="M11 6l.463 -.536a5 5 0 0 1 7.072 0a4.993 4.993 0 0 1 -.001 7.072" /><path d="M12.603 18.534a5.07 5.07 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" /><path d="M16 19h6" /><path d="M19 16v6" /></svg>'
            + ' &nbsp;&nbsp;发 布'
            + ' </a>'
            + ' <a href="javascript:void(0);" class="dropdown-item job-list-outline-btn" data-bs-toggle="modal" data-bs-target="#modal-opt-job">'
            + ' <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-link-off"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 15l3 -3m2 -2l1 -1" /><path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464" /><path d="M3 3l18 18" /><path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463" /></svg>'
            + ' &nbsp;&nbsp;下 线'
            + ' </a>'
            + ' <a href="javascript:void(0);" class="dropdown-item job-list-edit-btn">'
            + ' <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-edit"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" /><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" /><path d="M16 5l3 3" /></svg>'
            + ' &nbsp;&nbsp;编 辑'
            + ' </a>'
            + ' <a href="javascript:void(0);" class="dropdown-item text-red job-list-delete-btn" data-bs-toggle="modal" data-bs-target="#modal_delete_job">'
            + ' <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-trash"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 7l16 0" /><path d="M10 11l0 6" /><path d="M14 11l0 6" /><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" /><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg>'
            + ' &nbsp;&nbsp;删 除'
            + ' </a>'
            + ' </div>'
            + ' </div>'
            + ' </div>'
            + ' </div>'
            + ' </div>'
            + ' </div>'
            + ' </li>';
        // HTML转为jQuery对象
        let jobRowEl = $(rowHtmlStr);
        // 绑定操作事件
        // 发布
        jobRowEl.find('.job-list-publish-btn').click(function () {
          // 修改的记录Id
          recordId = job.id;
          // 修改的目标状态, 草稿箱 --> 发布中
          recordState = 1;
          // 修改操作的行
          optRecordRow = jobRowEl;
        });
        // 已完成(下线)
        jobRowEl.find('.job-list-outline-btn').click(function () {
          // 修改的记录Id
          recordId = job.id;
          // 修改的目标状态, 发布中 --> 已完成
          recordState = 2;
          // 修改操作的行
          optRecordRow = jobRowEl;
        });
        // 详情
        jobRowEl.find('.job-list-title-btn').click(function () {
          // 当前访问的职位Id
          currentJobId = job.id;
          // 加载编辑页
          $('#bit-page-content').load('job_details.html');
        });
        // 编辑
        jobRowEl.find('.job-list-edit-btn').click(function () {
          // 当前访问的职位Id
          currentJobId = job.id;
          // 加载编辑页
          $('#bit-page-content').load('job_edit.html');
        });
        // 删除
        jobRowEl.find('.job-list-delete-btn').click(function () {
          // 修改的记录Id
          recordId = job.id;
          // 删除操作
          recordState = -1;
          // 修改操作的行
          optRecordRow = jobRowEl;
        });
        // 追加到页面
        $('#job-list-items-body').append(jobRowEl);
      });
      
      // 显示分页
      buildJobPaginator(data);
    }

    // 分页显示
    function buildJobPaginator (data) {
        $('.bit-paginator').jqPaginator({
          totalPages: data.totalPage,
          visiblePages: 10,
          currentPage: data.pageNum,
          first: '<li class="page-item first"><a class="page-link" href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevrons-left"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M11 7l-5 5l5 5" /><path d="M17 7l-5 5l5 5" /></svg></a></li>',
          prev: '<li class="page-item prev"><a class="page-link" href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-left"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M15 6l-6 6l6 6" /></svg></a></li>',
          next: '<li class="page-item next"><a class="page-link" href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M9 6l6 6l-6 6" /></svg></a></li>',
          last: '<li class="page-item last"><a class="page-link" href="javascript:void(0)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-chevrons-right"><path stroke="none" d="M0 0h24v24H0z" fill="none" /><path d="M7 7l5 5l-5 5" /><path d="M13 7l5 5l-5 5" /></svg></a></li>',
          page: '<li class="page-item page"><a class="page-link" href="javascript:void(0)">{{page}}</a></li>',
          onPageChange: function (pageNum, type) {
              $('.bit-paginator-text').html('当前显示第 ' + pageNum + ' / ' + data.totalPage + ' 页');
              // 当前访问的页号
              cuuurentPageNum = pageNum;
              // 加载职位列表
              if (type == 'change') {
                loadJobList(cuuurentPageNum);
              }
          }
      });
    }

    // 绑定模态框确认修改状态按钮事件job-list-delete-confirm-btn
    $('#job-list-state-confirm-btn').click(function () {
      // 构造请求数据
      let sendData = {
        id : recordId,
        state : recordState
      };

      // 发送请求
      changeState(sendData);
    });

    // 绑定模态框确认删除按钮事件
    $('#job-list-delete-confirm-btn').click(function () {
      if (recordState != -1) {
        console.info('操作与状态不符，请检查...');
        return;
      }
      // 发送请求
      deleteRecord(recordId);
    });

    // 修改状态
    function changeState(sendData) {
      if (!sendData) {
        return;
      }
      // AJAX
      $.ajax({
        type : 'post',
        url : 'job/state',
        data : JSON.stringify(sendData),
        success : function (respData) {
          if (respData.code == 0) {
            // 提示
            $.toast({
              heading: '提示',
              text: '操作成功.',
              icon: 'success'
            });

            let stateHtml;
            // 修改行中显示的状态
            switch (sendData.state) {
              case 1: 
                stateHtml = '<span class="badge bg-green-lt">发布中</span>'
                break;
              case 2:
                stateHtml = '<span class="badge bg-pink">已下线</span>'
                break;
              default:
                break;
            }

            if (!stateHtml) {
              return;
            }
            // 更新页面内容
            optRecordRow.find('.job-list-state').html(stateHtml);
          } else {
            // 提示
            $.toast({
              heading: '提示',
              text: respData.message,
              icon: 'info'
            });
          }
        }
      });
    }

    // 删除操作
    function deleteRecord(id) {
      if (!id) {
        return;
      }
      // AJAX
      $.ajax({
        type : 'delete',
        url : 'job/delete?id=' + id,
        contentType : 'application/x-www-form-urlencoded',
        success : function (respData) {
          if (respData.code == 0) {
            // 提示
            $.toast({
              heading: '提示',
              text: '操作成功.',
              icon: 'success'
            });
            // 刷新页面
            loadJobList(cuuurentPageNum);
          } else {
            // 提示
            $.toast({
              heading: '提示',
              text: respData.message,
              icon: 'info'
            });
          }
        }
      });
    }

    // 搜索按钮绑定事件
    $('.job-list-search-job').click(function () {
      // 设置起始页号为1
      cuuurentPageNum = 1;
      // 开始搜索
      loadJobList(cuuurentPageNum);
    });
  })
</script>